<template>
  <div>
    <el-dialog custom-class="dialog"  :title="title" width="50%" :modal-append-to-body="false" :before-close="handleClose" v-el-drag-dialog :destroy-on-close="true" :visible="isShow">
      <div style="height: 48vh;overflow: auto;position: relative;">
        <el-form :model="settingForm" ref="settingDialogForm" label-width="150px">
          <div v-for="(item, index) in settingForm.attributeKeys" :key="item.key">
            <el-form-item
              :label="item.title"
              :prop="'attributeKeys.' + index + '.value'"
              :rules="{required: item.required, message: '请填写'+item.title, trigger: 'blur'}"
              v-if="item.type==1">
              <el-col :span="18">
                <el-input v-model="item.value"></el-input>
              </el-col>
            </el-form-item>
            <el-form-item
              :label="item.title"
              :prop="'attributeKeys.' + index + '.value'"
              :rules="{required: item.required, message: '请选择'+item.title, trigger: 'blur'}"
              v-if="item.type==2">
              <el-col :span="18">
                <el-select v-model="item.value" placeholder="请选择">
                  <el-option v-for="(opt,optIndex) in optionToArr(item.options)" :key="opt" :label="opt" :value="optIndex+1" />
                </el-select>
              </el-col>
            </el-form-item>
            <el-form-item
              :label="item.title"
              :prop="'attributeKeys.' + index + '.value'"
              :rules="{required: item.required, message: '请选择'+item.title, trigger: 'blur'}"
              v-if="item.type==3">
              <el-col :span="18">
                <el-upload
                class="upload-demo"
                :action="uploadFileUrl"
                :headers="uploadHeaders"
                :file-list="uploadFileList"
                :on-change="((file,fileList)=>{uploadChange(file,fileList,index)})"
                :on-remove="((file,fileList)=>{uploadRemove(file,fileList,index)})">
                <el-button type="primary">点击上传</el-button>
                </el-upload>
              </el-col>
            </el-form-item>
          </div>
        </el-form>
      </div>
      <div class="dialog-button-slot">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" :loading="clicked" @click="confirm('settingDialogForm')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<style lang="scss" scoped>
  .dialog{
    .el-dialog__header{
      border-bottom: 1px solid #eee;
    }
  }
  .dialog-button-slot{
    width: 100%;
    padding-top: 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
  }
</style>
<script>
  import elDragDialog from '@/directive/el-drag-dialog' // base on element-ui
  import utils from '../../../utils/utils.js'
  import {list} from '@/api/sysMenu'
  import {find,update} from '@/api/sysPlugin';
  import { getToken } from '@/utils/auth'
  export default {
    directives: { elDragDialog },
    data() {
      return {
        clicked: false, // 按钮防双击
        isShow: false,
        sysPluginData:{},
        settingForm:{
          attributeKeys:[]
        },
        title:'',
        uploadFileList:[],
        uploadFileUrl:'',
        uploadHeaders:{Authorization:''},
        id:''
      }
    },
    created() {
      this.uploadFileUrl = process.env.VUE_APP_BASE_API +'/admin/sysFile/upload'
      this.uploadHeaders.Authorization = getToken()
    },
    methods: {
      optionToArr(options) {
        if (options==null) {
            return []
        } else {
            return options.split(',')
        }
      },
      show(id) {
        let _this = this;
        this.id = id;
        this.clicked = false; // 按钮防双击
        this.uploadFileList = [];
        this.title = '';
        this.sysPluginData  = {};
        this.settingForm.attributeKeys = [];

        find(id).then(response => {
          console.log(response)
          if (response.type == 'success') {
            _this.title = response.data.sysPlugin.name+'配置';
            _this.sysPluginData  = response.data.sysPlugin;
            response.data.attributeKeys.forEach(function (item) {
              if (item.type == 2) {
               item.value = parseInt(item.value)
              }
              _this.settingForm.attributeKeys.push(item)
            })
            console.log(_this.settingForm)
            _this.isShow = true;
          } else {
            _this.$message({
              message: response.content,
              offset: 120,
              center: true
            })
          }
        }).catch(error => {

        });

      },
      uploadChange(file, fileList, index){
        console.log(file)
        console.log(fileList)
        if(!utils.isNull(file.response) && file.response.type == 'success'){
          this.settingForm.attributeKeys[index].value = file.response.data.id
        }
        this.uploadFileList = fileList.slice(-1);//控制文件保留最后一个
      },
      uploadRemove(file, fileList, index){
        this.settingForm.attributeKeys[index].value=null;
      },
      handleClose(){
        this.isShow = false
      },
      confirm(form) {
        const _this = this
        this.$refs[form].validate((valid) => {
          if (valid) { // 校验表单
            _this.clicked = true
            let params = new URLSearchParams();
            params.append('id', _this.id);
            update(_this.settingForm.attributeKeys,params).then(response => {
              console.log(response)
              _this.clicked = false
              if (response.type == 'success') {
                _this.isShow = false;
              } else {
                _this.$message({
                  message: response.content,
                  offset: 120,
                  center: true
                })
              }
            }).catch(error => {
              _this.clicked = false
            })
          } else {
            console.log('error submit!!')
            return false
          }
        })

      },
    }
  }
</script>
